.spider {
  padding: 0;

  .spider_title {
    width: 95%;
    height: 20vw;
    display: flex;
    justify-content: space-around;
    padding: 0 3vw;
    padding-top: 5vw;

    input {
      width: 70%;
      height: 10vw;
    }

    button {
      height: 10vw;
    }

    .ant-input:hover {
      box-shadow: none;
      border: 1px solid #d9d9d9;
    }
  }

  .spider_ul {
    width: 90%;
    height: auto;
    display: flex;
    margin: .625rem auto;
    flex-wrap: wrap;

    .spider_ul_li {
      width: 20vw;
      height: 20vw;
      margin: 1vw;
      list-style: none;

      img {
        width: 100%;
      }
    }
  }

  .spider_botton {
    width: 90%;
    height: 15vw;
    margin: 2vw auto;
    position: relative;

    .spider_botton_left {
      position: absolute;
      top: 0;
      width: 15vw;
      left: 2vw;
    }

    .spider_botton_right {
      position: absolute;
      top: 0;
      width: 15vw;
      right: 2vw;
    }
  }

  .spider_modal {
    width: 100%;
    height: 100%;
    overflow: auto;

    .spider_modal_li {
      width: 95%;
      margin-bottom: 4vw;
      list-style: none;
      justify-content: space-around;
      display: flex;
      align-items: center;

      .spider_modal_li_title {
        width: 50%;
        height: 100%;

        img {
          display: block;
          margin: 0 auto;
        }
      }

      .spider_modal_li_div {
        width: 50%;
        height: 100%;

        p {
          text-align: center;
          padding-top: 1vw;
          font-size: 1.125rem;
          margin-bottom: 0;
          color: #999999;
          font-weight: 600;
        }

        img {
          width: 8vw;
          display: block;
          margin: 1vw auto;
        }
      }
    }
  }
}